/****************
 *@description: 会员卡对账报表
 *@author: Xhd
 *@date: 2023-09-16 15:19:48
 *@version: V1.0.0
*************************************************************************/

import React, { Component } from "react";
import TheTable from "@/components/TheTable";
import TheQueryForm from '@/components/TheQueryForm';
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";
import { getDateTime3 } from '@/utils/getDate';
import { apiPostMemberBalanceReportFormsPage, apiPostMemberBalanceReportFormsExport } from "@/request/cashier";
import { exportSheetTable } from '@/utils/exportTable.js';
import moment from "moment";
import _ from 'lodash';
class Reconciliation extends Component {
  constructor(props) {
    super(props)
    this.state = {
      searchOption: [
        { field: 'times', label: '统计时间', placeholder: '', required: false, rules: [], type: 'RangePicker', defaultValue: '' },
      ],
      columns: [
        {
          title: "会员id",
          dataIndex: "memberId",
          key: "memberId",
        },
        {
          title: "会员手机号",
          dataIndex: "memberPhone",
          key: "memberPhone",
        },
        {
          title: "昵称",
          dataIndex: "memberName",
          key: "memberName",
        },
        {
          title: "期初余额",
          dataIndex: "initialBalance",
          key: "initialBalance",
          render: (text, record) => {
            return <React.$Price price={text} />
          }
        },
        {
          title: "充值储值金额",
          dataIndex: "recharge",
          key: "recharge",
          render: (text, record) => {
            return <React.$Price price={text} />
          }
        },
        {
          title: "赠送储值金额",
          dataIndex: "give",
          key: "give",
          render: (text, record) => {
            return <React.$Price price={text} />
          }
        },
        {
          title: "储值消费金额",
          dataIndex: "consumption",
          key: "consumption",
          render: (text, record) => {
            return <React.$Price price={text} />
          }
        },
        {
          title: "期末余额",
          dataIndex: "finalBalance",
          key: "finalBalance",
          render: (text, record) => {
            return <React.$Price price={text} />
          }
        },
      ],
      dataSource: [],
      newColumns: [],
      form_show: true,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      values: ""
    }
  }

  componentDidMount() {

  }

  getData = async (values) => {
    const { pageNo, pageSize } = this.state
    if (values && !_.isEmpty(values.times)) {
      values.startTime = getDateTime3(values.times[0])
      values.endTime = getDateTime3(values.times[1])
      delete (values.times)
    }
    this.setState({
      values
    })
    const params = {
      pageNo, pageSize, ...values
    }
    apiPostMemberBalanceReportFormsPage(params).then(res => {
      if (res.code === 0) {
        this.setState({
          dataSource: res.data.records,
          total: res.data.total
        })
      }
    })
  }

  onFormSearch(values) {
    this.getData(values)
  }

  onReset() {
    this.getData()
  }

  pageChange = (pageNo, pageSize) => {
    const { values } = this.state
    this.setState({
      pageNo,
      pageSize
    }, () => {
      this.getData(values)
    })
  };

  toExport() {
    let search = this.queryFormRef.formRef.getFieldsValue()
    let values = {}
    if(!search.times) {
      React.$message({
        type: "warning",
        content: "请先输入统计时间查询后再导出"
      })
      return
    }else {
      values.startTime = getDateTime3(search.times[0])
      values.endTime = getDateTime3(search.times[1])
    }
    apiPostMemberBalanceReportFormsExport(values).then(res => {
      if (res.code === 0) {
        let th_arr = [
          {
            title: '统计周期：'+ moment(values.startTime).format('YYYY年MM月DD日') +"-"+moment(values.endTime).format('YYYY年MM月DD日'),
            prop: '',
            children: [
              {
                title: "会员id",
                prop: "memberId",
              },
              {
                title: "会员手机号",
                prop: "memberPhone",
              },
              {
                title: "昵称",
                prop: "memberName",
              },
              {
                title: "期初余额",
                prop: "initialBalance",
              },
              {
                title: "充值储值金额",
                prop: "recharge",
              },
              {
                title: "赠送储值金额",
                prop: "give",
              },
              {
                title: "储值消费金额",
                prop: "consumption",
              },
              {
                title: "期末余额",
                prop: "finalBalance",
              },
            ]
          },
        ]
        let tb_arr = []
        res.data.forEach((item, index) => {
          tb_arr.push({
            memberId: item.memberId || '/',
            memberPhone: item.memberPhone || '/',
            memberName: item.memberName || '/',
            initialBalance: React.$transNum(item.initialBalance, 2, -2) || '/',
            recharge: React.$transNum(item.recharge, 2, -2) || '/',
            give: React.$transNum(item.give, 2, -2) || '/',
            consumption: React.$transNum(item.consumption, 2, -2) || '/',
            finalBalance: React.$transNum(item.finalBalance, 2, -2) || '/',
          })
        })
        exportSheetTable({ fileName: '会员卡对账报表', tH_data: th_arr, tB_data: tb_arr, isSheet: true, merge: true, })
      }
    })
  }

  render() {
    const { columns, dataSource, form_show, searchOption, pageNo, pageSize, total } = this.state
    return (<div className="p-layout-box commodity-examine">
      <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
        onGetValues={(values) => this.onFormSearch(values)}
        onReset={(values) => this.onReset(values)}
      >
        <TheButton type="default" size="middle" style={{ marginLeft: "10px" }} onClick={() => this.toExport()} >导出</TheButton>
      </TheQueryForm>
      <TheTable
        scroll={{ x: "max-content", y: '63vh' }}
        columns={columns}
        dataSource={dataSource}
      />
      <ThePagination
        pageNo={pageNo}
        pageSize={pageSize}
        total={total}
        pageChange={this.pageChange}
      />
    </div>)
  }
}

export default Reconciliation
